import { InlineFilter } from '@/components/InlineFilter';
import { 
  TokensTypographyFontWeights,
  TokensTypographyFontSizes,
  TokensTypographyLineHeights,
  TokensTypographyFonts } from '@/components/Theming/TokenGroups';
import { Example, ExampleCode } from '@/components/Example';
import { Tabs, View } from '@aws-amplify/ui-react';
import { FontWeightExample, FontSizesExample, LineHeightsExample } from './examples';

## Font weights

<InlineFilter filters={['angular']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/FontWeightExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>
<InlineFilter filters={['react']}>
  <Tabs.Container defaultValue="Example usage">
    <Tabs.List>
      <Tabs.Item value="Example usage">Example usage</Tabs.Item>
      <Tabs.Item value="CSS">CSS</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="Example usage">
      <View marginTop="var(--amplify-space-large)">
        <Example>
          <FontWeightExample  />
          <ExampleCode>
  ```tsx file=./examples/FontWeightExample.tsx

  ```
          </ExampleCode>
        </Example>
      </View>
    </Tabs.Panel>
    <Tabs.Panel value="CSS">
      <View marginTop="var(--amplify-space-large)">
      <Example>
        <ExampleCode>
  ```css file=./examples/FontWeightExample.css

  ```
        </ExampleCode>
      </Example>
      </View>
    </Tabs.Panel>
  </Tabs.Container>
</InlineFilter>
<InlineFilter filters={['vue']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/FontWeightExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>

<TokensTypographyFontWeights />

## Font sizes

<InlineFilter filters={['angular']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/FontSizesExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>
<InlineFilter filters={['react']}>
  <Tabs.Container defaultValue="Example usage">
    <Tabs.List>
      <Tabs.Item value="Example usage">Example usage</Tabs.Item>
      <Tabs.Item value="CSS">CSS</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="Example usage">
      <View marginTop="var(--amplify-space-large)">
        <Example>
          <FontSizesExample  />
          <ExampleCode>
  ```tsx file=./examples/FontSizesExample.tsx

  ```
          </ExampleCode>
        </Example>
      </View>
    </Tabs.Panel>
    <Tabs.Panel value="CSS">
      <View marginTop="var(--amplify-space-large)">
      <Example>
        <ExampleCode>
  ```css file=./examples/FontSizesExample.css

  ```
        </ExampleCode>
      </Example>
      </View>
    </Tabs.Panel>
  </Tabs.Container>
</InlineFilter>
<InlineFilter filters={['vue']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/FontSizesExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>

<TokensTypographyFontSizes />

## Line heights

<InlineFilter filters={['angular']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/LineHeightsExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>
<InlineFilter filters={['react']}>
  <Tabs.Container defaultValue="Example usage">
    <Tabs.List>
      <Tabs.Item value="Example usage">Example usage</Tabs.Item>
      <Tabs.Item value="CSS">CSS</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="Example usage">
      <View marginTop="var(--amplify-space-large)">
        <Example>
          <LineHeightsExample  />
          <ExampleCode>
  ```tsx file=./examples/LineHeightsExample.tsx

  ```
          </ExampleCode>
        </Example>
      </View>
    </Tabs.Panel>
    <Tabs.Panel value="CSS">
      <View marginTop="var(--amplify-space-large)">
      <Example>
        <ExampleCode>
  ```css file=./examples/LineHeightsExample.css

  ```
        </ExampleCode>
      </Example>
      </View>
    </Tabs.Panel>
  </Tabs.Container>
</InlineFilter>
<InlineFilter filters={['vue']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/LineHeightsExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>

<TokensTypographyLineHeights />

## Font families

Amplify UI ships with tokens for both static and variable fonts. The benefit of a variable font is you can include many variations of the font (for weight and axes) in a single file. [Learn more about variable weight fonts in this guide from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)

<TokensTypographyFonts />

